import { useState, useEffect } from 'react'
import { PDFParamSchema, PDFSchema } from '@src/components/schema/pdf'
import style from './index.module.less'
import classNames from 'classnames'
import Params from './components/params'
import SignList from './components/signList'

interface Props {
  caseid: string
  fileid: string
  file: PDFSchema | null
  editable: boolean
  formParams: PDFParamSchema[]
  formInitData: {[k: string]: any}
  isSeal: boolean
  formParamsHidden: PDFParamSchema[]
  formParamsMap: { [k: string]: PDFParamSchema }
  isLocation: boolean
  docType: string
  refreshFn: () => void
}

function Main ({ caseid, fileid, file, editable, formParams, formInitData, isSeal, isLocation, formParamsHidden, formParamsMap, docType, refreshFn }: Props) {
  const [visibleBlock, setVisibleBlock] = useState(0)
  useEffect(() => {
    setVisibleBlock(docType === '用户上传' ? 1 : 0)
  }, [docType])
  return (
    <div className={style.container}>
      <div className={style['toggle-line']}>
        {docType !== '用户上传' && <a className={classNames(style['toggle-btn'], { [style.active]: visibleBlock === 0 })} onClick={() => setVisibleBlock(0)}>文书参数设置</a>}
        {isLocation && <a className={classNames(style['toggle-btn'], { [style.active]: visibleBlock === 1 })} onClick={() => setVisibleBlock(1)}>签名人员信息</a>}
        {!isLocation && <span className={style['toggle-btn']}></span>}
      </div>
      <div className={classNames(style.block, { [style.active]: visibleBlock === 0 })}>
        <Params caseid={caseid} fileid={fileid} file={file} editable={editable} formParams={formParams} formInitData={formInitData} isSeal={isSeal} formParamsHidden={formParamsHidden} formParamsMap={formParamsMap} refreshFn={refreshFn} />
      </div>
      <div className={classNames(style.block, { [style.active]: visibleBlock === 1 })}>
        <SignList fileid={fileid} caseid={caseid} editable={editable} />
      </div>
    </div>
  )
}

export default Main
